<template>
  <div id="leadbar">
    <el-menu
      default-active="1-4-1"
      class="menu"
      mode="vertical"
      :collapse="isCollapse"
      :router="true"
    >
      <el-menu-item index="/">
        <i class="el-icon-odometer"></i>
        <span slot="title">导航一</span>
      </el-menu-item>
      <el-menu-item index="/weather">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="/sa">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="/setting">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'lead-bar',
  data () {
    return {
      isCollapse: true
    }
  },
  methods: {

  }
}
</script>

<style scoped>
  #leadbar {
    height: 100vh;
    left: 0;
    position: fixed;
    z-index: 200;
    width: 10vw;
  }
  .menu {
    position: absolute;
    height: 100vh;
  }
</style>
